<template>
	<view class="container">
		<!-- 下拉刷新 -->
		<scroll-view 
		  :scroll-y="true" 
		  class="scroll-view" 
		  @refresh="onRefresh"
		  :refresher-enabled="true"
		  :refresher-triggered="triggered"
		  @scrolltolower="onLoadMore"
		>
			<!-- 3D轮播图 -->
			<view class="section-box section-area">
				<swiper class="lb-banner-container" 
					circular 
					:autoplay="true" 
					:interval="3000" :duration="500" 
					:next-margin="scalePx(100)" 
					:previous-margin="scalePx(100)" 
					@change="onSwiperChange"
					display-multiple-items="1"
				>
					<swiper-item v-for="(item, idx) in swiperList" :key="idx">
						<view class="slide-wrapper" 
							:class="{
							  'active'  : idx === (current + 0),
							  'next'    : idx === (current + 1) % swiperList.length,
							  'far-next': idx === (current + 2) % swiperList.length,
							  'prev'    : idx === (current + swiperList.length - 1) % swiperList.length,
							  'far-prev': idx === (current + swiperList.length - 2) % swiperList.length,
							}"
						>
							<image :src="item" class="lb-slide-img" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 秒杀/推荐专区 -->
			<view class="section-box section-area">
				<view class="section-title">
					<text class="title-text">🔥 限时秒杀</text>
					<text class="more-text" @click="goToCategory">更多›</text>
				</view>
				<scroll-view class="section-scroll-x" scroll-x enhanced show-scrollbar="false">
					<view class="scroll-x-card" v-for="(item, index) in sekillProds" :key="index" @click="onSeckill(item)">
						<image :src="item.image" class="scroll-x-image" mode="aspectFit"></image>
						<view class="scroll-x-info">
							<text class="scroll-x-name">{{ item.name }}</text>
							<view class="scroll-x-price">
								<text class="scroll-x-current">¥{{ item.price }}</text>
								<text class="scroll-x-original">¥{{ item.originalPrice }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 内容区域 -->
			<view class="content">
				<text class="content-title">最新动态</text>
				<view class="news-list">
					<view class="news-item" v-for="(news, index) in newsList" :key="index">
						<text class="news-title">{{ news.title }}</text>
						<text class="news-date">{{ news.date }}</text>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="footer">
				<text class="footer-text">© 2025 我的小程序. All rights reserved.</text>
			</view>

			<!-- 快捷入口 -->
			<view class="section-bars">
				<view class="section-bar" v-for="(item, index) in entranceList" :key="index" @click="onEntranceClick(item)">
					<image :src="item.icon" class="section-bar-icon" />
					<text class="entrance-text">{{ item.text }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const hasMore   = ref(true)  // 是否还有更多
	const triggered = ref(false) // 下拉刷新状态
	const loading   = ref(false)    
	const current   = ref(0)    // 假设初始加载时第二张图片是中心图片
	// 轮播图数据
	const swiperList = ref([
		'/static/banners/banner1.png',
		'/static/banners/banner2.png',
		'/static/banners/banner3.png',
		'/static/banners/banner4.png',
		'https://picsum.photos/id/1018/800/400',
		'https://picsum.photos/id/1015/800/400',
		'https://picsum.photos/id/1019/800/400',
		'https://picsum.photos/id/1016/800/400'
	])

	// 快捷入口数据
	const entranceList = ref([
		{ text: '首页', icon: '/static/icons/icon1.png' },
		{ text: '分类', icon: '/static/icons/icon2.png' },
		{ text: '服务', icon: '/static/icons/icon3.png' },
		{ text: '我的', icon: '/static/icons/icon4.png' },
	])

	const sekillProds = ref([
		{ id: 101, name: '商品A', image: '/static/products/product7.jpg',  price: '99.00',  originalPrice: '199.00' },
		{ id: 102, name: '商品A', image: '/static/products/product8.jpg',  price: '99.00',  originalPrice: '199.00' },
		{ id: 103, name: '商品B', image: '/static/products/product9.jpg',  price: '129.00', originalPrice: '259.00' },
		{ id: 105, name: '商品C', image: '/static/products/product8.jpg',  price: '199.00', originalPrice: '399.00' },
		{ id: 104, name: '商品C', image: '/static/products/product10.jpg', price: '186.00', originalPrice: '399.00' },
	])

	// 新闻数据
	const newsList = ref([
		{ date: '2025-09-01', title: '欢迎来单摩天',   },
		{ date: '2025-08-25', title: '新功能上线通知', },
		{ date: '2025-08-20', title: '用户活动预告',   }
	])

	const onRefresh= async () => {
      triggered.value = true
      await getEntries()
      triggered.value = false
    }

    // 上拉加载
    const onLoadMore = () => {
		if (!hasMore.value || loading.value) {
			return  
		}
    }

    // 刷新数据
    const refreshData = () => {
		getEntries()
    }
	
	const getEntities = () => { }
	// 屏幕宽度转换为px
	const screenWidth = uni.getSystemInfoSync().screenWidth
	const getZindex = (index, curVal) => {
		let len = swiperList.value.length
		console.log("getZindex ", curVal, len)
		if (index === (curVal + 2) % len || index === (curVal - 2 + len) % len) {
			// far-next
			return 0
		} else if (index === (curVal + 1) % len || index === (curVal - 1 + len) % len) {
			return 1
		} else {
			return 10;
		}
	}

	const onSwiperChange = (e) => current.value = e.detail.current
	// const getPrevIndex = () => current.value === 0 ? list.value.length - 1 : current.value - 1
	// const getNextIndex = () => current.value === list.value.length - 1 ? 0 : current.value + 1
	const scalePx = (rpx) => (rpx * screenWidth) / 750 + 'px';

	// 当滑动结束时更新current值
	// const onSwiperChange = (e) => { current.value = e.detail.current; }

	const goToCategory = (item) => {
		// uni.showToast({ title: `点击了 查看更多 限时秒杀`, icon: 'none'})
	}

	const onSeckill = (item) => {
		uni.showToast({ title: `点击了 ${item.name}`, icon: 'none' })
	}

	// 快捷入口点击事件
	// const onEntranceClick = (item) => { uni.showToast({ title: `点击了 ${item.text}`, icon: 'none'}) }
	const onEntranceClick = (item) => {
		let url = '';
		let tab = false;
		switch (item.text) {
			case '首页': tab = true; url = '/pages/index/index'; break;
			case '分类': tab = false; url = '/pages/category/index'; break;
			case '服务': tab = true; url = '/pages/service/index'; break;
			case '我的': tab = true; url = '/pages/profile/index'; break;
			default: url = '/pages/index/index';
		}
		// if(tab) { // tabBar 页面 uni.switchTab({ url: url }); }
		uni.navigateTo({ url: url });
	}
</script>

<style lang="scss">
	@import '@/styles/index.scss';
	@import '@/styles/home.scss';
</style>